//
//  HomeRecommendSetChannelView.swift
//  HomeRecommendSetChannelView
//
//  Created by Ben on 2021/9/9.
//

import SwiftUI

struct HomeRecommendSetChannelView: View {
    
    @EnvironmentObject var homeVM: HomeViewModel
    
    @Namespace var animation
    
    var safeAreaInsets: EdgeInsets
    
    var body: some View {
        
        VStack {
            
            Spacer(minLength: 30)
            
            VStack {
                
                MyChannelScrollHeaderView()
                
                ScrollView(.vertical, showsIndicators: true) {
                    
                    VStack {
                        
                        MyChannelListView()
                        
                        SuperGategoryView()
                        
                        ChildGategoryListView()
                    }
                    .padding(.bottom, safeAreaInsets.bottom + 10)
                }
                .frame(maxHeight: .infinity)
            }
            .background(Color.white.clipShape(RoundedRectangle(cornerRadius: 10)))
        }
        
        .background(
            
            Color.black.opacity(0.5)
        )
        
        
    }
    
    
    func MyChannelScrollHeaderView() -> some View {
        return HStack {
            
            Text("我的频道")
                .fontWeight(.bold)
            
            Spacer()
            
            Button {
                
                withAnimation(.easeInOut) {
                    homeVM.showSetChannel.toggle()
                }
                                    
            } label: {
                Image(systemName: "xmark")
                    .font(.system(size: 12, weight: .bold))
                    .foregroundColor(.black)
                    .padding(6)
                    .background(
                        
                        Circle()
                            .stroke(Color(hex: 0xD5D6D7), lineWidth: 1)
                    )
            }
            
        }
        .padding(.vertical, 10)
        .padding(.horizontal, 16)
    }
    
    func MyChannelListView() -> some View {
        return LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 15), count: 3), spacing: 20) {
            
            ForEach(homeVM.myChannelList) { channel in
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color(hex: 0xD5D6D7), lineWidth: 0.5)
                        .frame(height: 35)
                    
                    HStack {
                        // 猜你喜欢，无法点击移除
                        
                        Text(channel.title ?? "")
                            .lineLimit(1)
                            .foregroundColor(channel.id == 0 ? Color(hex: 0xA8AAAB) : Color(hex: 0x373738))
                            .frame(maxWidth: .infinity)
                        
                        if channel.id != 0 {
                            Divider()
                                .background(Color(hex: 0xD5D6D7))
                                .frame(width: 0.5, height: 15)
                            
                            Button {
                                withAnimation(.easeIn) {
                                    homeVM.myChannelList = homeVM.myChannelList.removeObject(obj: channel)
                                }
                            } label: {
                                Image(systemName: "xmark")
                                    
                                    .foregroundColor(Color(hex: 0xD9DBDC))
                                    .font(.system(size: 10, weight: .bold))
                            }
                        }
                       
                    }
                    .padding(.horizontal, 8)
                }
                
            }
        }
        .padding(.horizontal, 16)
    }
    func SuperGategoryView() -> some View {
        // 顶级分类选择
        ScrollView(.horizontal, showsIndicators: false) {
            
            LazyHStack {
                ForEach(homeVM.superCategoryList) { tab in
                    HomeRecommendGoodsCategoryTabBtn(tab: tab, selectedTab: homeVM.selectedSuperCategory!, animation: animation, selectCategoryTabBlock: { tab in
                        
                        withAnimation(.spring()) {
                            homeVM.selectedSuperCategory = tab
                        }
                    })
                    
                }
            }
            .padding(.leading, 16)
            .padding(.trailing, 60)
            .background(Color.white)
        }
            .frame(height: 50, alignment: .center)
            .padding(.top, 30)
    }
    
    // 顶级分类下的子级分类列表
    // 我的频道列表
    func ChildGategoryListView() -> some View {
        
        return
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 15), count: 3), spacing: 20) {
            
            let childCategoryList = homeVM.selectedChildCategoryList.filter { homeVM.myChannelList.contains($0) == false }
            
            ForEach(childCategoryList) { channel in
                ZStack {
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color(hex: 0xD5D6D7), lineWidth: 0.5)
                        .frame(height: 35)
                    
                    HStack {
                        
                        
                        Button {
                            withAnimation(.easeIn) {
                                homeVM.myChannelList.append(channel)
                            }
                        } label: {
                            Image(systemName: "plus")
                                
                                .foregroundColor(Color(hex: 0xD9DBDC))
                                .font(.system(size: 10, weight: .bold))
                        }
                        
                        Text(channel.title ?? "")
                            .lineLimit(1)
                            .foregroundColor(Color(hex: 0x373738))
                        
                    }
                    .padding(.horizontal, 8)
                }
            }
        }
        .padding(.horizontal, 16)
    }
}
